---
title: Badge
description: Displays a badge or a component that looks like a badge.
links:
  - label: Report an issue
    href: https://github.com/mehdibha/dotUI/issues/new/choose
  - label: Edit this page
    href: https://github.com/mehdibha/dotUI/tree/main/content/components/data-display/badge.mdx?plain=1
---

<ComponentPreview name="badge/demos/default" preview={`<Badge>Badge</Badge>`} />

## Installation

```package-install
npx shadcn@latest add @dotui/badge
```

## Anatomy

```tsx
import { Badge } from "@/components/core/badge";

<Badge>Badge</Badge>;
```

## Options

### Variant

Use the `variant` prop to control the visual style of the `Badge`. The default variant is `primary`.

<ComponentPreview
  name="badge/demos/variants"
  preview={`<Badge variant="neutral">neutral</Badge>
  <Badge variant="accent">accent</Badge>
  <Badge variant="success">success</Badge>
  <Badge variant="danger">danger</Badge>
  <Badge variant="warning">warning</Badge>
  <Badge variant="info">info</Badge>`}
/>

### Size

Use the `size` prop to control the size of the `Badge`. The default variant is `sm`.

<ComponentPreview
  name="badge/demos/sizes"
  preview={`<Badge size="sm">Small</Badge>
  <Badge size="md">Medium</Badge>
  <Badge size="lg">Large</Badge>`}
/>

## Examples

### With icon

<ComponentPreview
  name="badge/demos/icon"
  preview={`<Badge size="sm"><ShieldIcon />Badge</Badge>
  <Badge size="md"><ShieldIcon />Badge</Badge>
  <Badge size="lg"><ShieldIcon />Badge</Badge>`}
/>

## API Reference

Badge accepts all HTML `span` element props and the following:

| Prop      | Type                                                                    | Default                        | Description            |
| --------- | ----------------------------------------------------------------------- | ------------------------------ | ---------------------- |
| `neutral` | `'neutral' \| 'accent' \| 'success' \| 'warning' \| 'info' \| 'danger'` | The visual style of the badge. |
| `size`    | `'sm' \| 'md' \| 'lg'`                                                  | `"sm"`                         | The size of the badge. |
